<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
    <script>eruda.init();</script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body style="background:#fff;">
    <canvas id="canvas" style="width:100%; height:100%; position:fixed;"></canvas>

    <script src="../dist/easy-canvas.min.js"></script>
    <script src="./draw.js"></script>
    <script>
        window.onload = function () {
            main()

        }
        window.onresize = function () {
            main()
        }

        const src = ''


        function Card(h, children) {
            return h('view', {
                styles: {
                    padding: 8,
                    backgroundColor: '#fff',
                    shadowColor: '#ccc',
                    shadowBlur: 10,
                    borderRadius: 4,
                    margin: 5,
                }
            }, children)
        }
        easyCanvas.component('card', (opt, children, h) => Card(h, children))

        function Title(h, level, title) {
            return h('view', {
                styles: {
                    padding: 10,
                    fontSize: 30 - level * 2,
                    borderBottomWidth: 0.5,
                    borderColor: '#f1f1f1',
                    fontWeight: 800,
                    marginBottom: 8,
                }
            }, [h('text', {
                styles: {
                }
            }, title)])
        }
        [1, 2, 3, 4, 5, 6].forEach(level => {
            easyCanvas.component(`h${level}`, (opt, children, h) => Title(h, level, children))
        })

        function main() {
            const canvas = document.querySelector('#canvas')

            const ctx = canvas.getContext('2d')
            const dpr = window.devicePixelRatio
            const w = window.innerWidth
            const h = window.innerHeight
            canvas.width = w * dpr
            canvas.height = h * dpr
            ctx.scale(dpr, dpr)
            layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h })

            const node = easyCanvas.createElement((h) => {
                return h('scroll-view', { styles: { backgroundColor: '#f1f1f1', height: window.innerHeight, width: '100%' } },
                    [
                        h('card', {}, [
                            h('h6', {}, 'normal'),
                            h('image', { attrs: { src }, on: { load(img) { console.log('image load', img) } } }, [])
                        ]),
                        h('card', {}, [
                            h('h6', {}, 'widthFix'),
                            h('image', { attrs: { src }, styles: { width: 100 } }, [])
                        ]),
                        h('card', {}, [
                            h('h6', {}, 'heightFix'),
                            h('image', { attrs: { src }, styles: { height: 100, width: 'auto' } }, [])
                        ]),
                        h('card', {}, [
                            h('h6', {}, 'width x height'),
                            h('image', { attrs: { src }, styles: { width: 100, height: 100 } }, [])
                        ]),
                        h('card', {}, [
                            h('h6', {}, 'aspectFill'),
                            h('image', { attrs: { src, mode: 'aspectFill' }, styles: { width: 100, height: 100 } }, [])
                        ]),
                        h('card', {}, [
                            h('h6', {}, 'aspectFit'),
                            h('image', { attrs: { src, mode: 'aspectFit' }, styles: { width: 100, height: 100 } }, [])
                        ])
                    ]
                )
            })
            console.log(node)
            node.mount(layer)
        }

        // 注册全局组件
        canvas.ontouchstart = ontouchstart
        canvas.ontouchmove = ontouchmove
        canvas.ontouchend = ontouchend
        canvas.onmousedown = ontouchstart
        canvas.onmousemove = ontouchmove
        canvas.onmouseup = ontouchend
    </script>
</body>

</html>